import React, { FC } from 'react';
import { Button, Space } from 'antd';
import styles from './index.less';
import IconFont from '@/components/IconFont';
import { useModel } from 'umi';
import { modelName } from '@/pages/Users/';
import useHoxModel from '@/pages/Users/useHoxModel';
import { ActionType } from '@/components/ProTable';

interface ToolBarProps {
  actionRef: React.MutableRefObject<ActionType | undefined>;
}

const ToolBar: FC<ToolBarProps> = ({ actionRef }) => {
  const { showModal } = useModel('useCommonModal', (model) => ({ showModal: model.showModal }));
  const { selectedKeys = [], selectedRowKey, dispatch } = useHoxModel((model) => [
    model.selectedKeys,
    model.selectedRowKey,
  ]);
  return (
    <div className={styles['toolbar-wrap']}>
      <div className={styles['left']}>
        <Space>
          <Button
            className={styles['add']}
            type="primary"
            onClick={async () => {
              if (!selectedKeys[0]) {
                return;
              }
              dispatch({
                userFormAreaList: [
                  {
                    label: selectedRowKey.title as string,
                    value: selectedRowKey.key,
                    isLeaf: selectedRowKey.isLeaf,
                  },
                ],
              });
              showModal(modelName + 'add');
            }}
          >
            <IconFont type={'iconxinzeng1'} />
            <span>新增</span>
          </Button>
        </Space>
      </div>
      <div className={styles['right']}></div>
    </div>
  );
};
export default ToolBar;
